<template>
    <div>
        <span id="span">{{name}}</span>
        <button @click="setname">修改name</button>
        <h3>{{name1}}</h3>
        <h3>{{age2}}</h3>
    </div>
</template>

<script>
export default {
//    props:["name1","age2"],
   props:{
       name1:{ 
           required: true, // 父组件必须传递这个参数
           type:String, // 对类型做验证
           default: "王五" ,// 如果父组件给子组件没有传递这个参数，name1得值就是default定义的值
       },
       age2:Boolean
   },
   data(){
       return {
           name:"zhangsn",
           age1:0
       }
   },
   methods:{
       setname() {
           this.name = "lisi"
       }
   },
    // 生命周期钩子函数 是在特定得时间内不需要手动调用，组件自己执行得函数，类似于一个人得出生到死
    // 初始化得生命周期有两个
    beforeCreate(){ // 还没出生呢 ，组件初始化刚开始
        console.log("beforecreate",this)
    },
    created(){ // 出生了 ，组件初始化完成
        console.log(this,"created")
    },
    beforeMount() { //组件挂在前
        console.log(this,"befroemountd",document.getElementById("span"));
    },
    mounted() { // 组件已经挂在完成了,可以获取dom
        console.log(document.getElementById("span"),"mounted")
    },
    beforeUpdate(){ // 组件内容更新前执行
        console.log("beforeUpdate");
    },
    updated() {  // 组件内容更新后执行
           console.log("Updated");
    },

    // watch:{  // 页面内容发生改变在watch里面搞事情

    // }
    beforeDestroy(){  // 组件销毁前 ，清除延时器，卸载插件
            console.log(" beforeDestroy");
    },
    destroyed(){ // 组件已经销毁了
             console.log(" Destroyed");
    },
    
    
}
</script>

<style>

</style>